<!-- 角色=> 个人  -- 市场化征信 -->
<template>
  <div class="main">
    <PureTableBar class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="ApplyCreditScore()"> 申请测算信用评分 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          max-height="600" :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' size="small" :disabled="!row.isMeasure" text @click="CheckCreditReport(row)">
              详情
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <!-- 申请测算信用评分 填写信息 -->

    <ReDialog :width="420" :height="200" :models="CreditVisible" @Closes="CloseVisible(CreditFrom)">
      <template #header>
        <h2 style="text-align: center;">申请测算信用评分</h2>
      </template>
      <template #main>
        <div class="h-full flex justify-center items-center">
          <el-form :model="CreditScoreFrom" :rules="rule" ref="CreditFrom" label-width="100px">
            <el-form-item label="申请人名称" prop="name">
              <el-input placeholder="申请人名称" v-model.trim="CreditScoreFrom.name" class="!w-[220px]" />
            </el-form-item>
            <el-form-item label="身份证号" prop="id">
              <el-input placeholder="身份证号" v-model.trim="CreditScoreFrom.id" class="!w-[220px]" />
            </el-form-item>
          </el-form>
        </div>

      </template>
      <template #footer>
        <el-button @click="SubmitVisible(CreditFrom)" :loading="btnloading" type="primary">确定</el-button>
        <el-button @click="CloseVisible(CreditFrom)"> 取消 </el-button>
      </template>
    </ReDialog>

    <!-- 查看征信报告 -->

    <ReDialog :width="650" :height="550" :models="CreditReportVisible" @Closes="CreditReportVisible = false">
      <template #header>
        <h2 style="text-align: center;">个人信用报告</h2>
      </template>
      <template #main>
        <el-scrollbar height="500px">
          <div class="showBG" v-html="ShowReport"></div>
        </el-scrollbar>
      </template>
      <template #footer>
      </template>
    </ReDialog>
    <ScoreParticulars ref="ScoreParticulars_" />
  </div>
</template>

<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useCreditReport } from "./hook/CreditReport";
import ScoreParticulars from "./component/ScoreParticulars.vue"
import { ref } from "vue";
const CreditFrom = ref();
const {
  rule,
  dataList,
  loading,
  CreditVisible,
  pagination,
  columns,
  ShowReport,
  btnloading,
  CreditScoreFrom,
  ScoreParticulars_,
  CreditReportVisible,
  ApplyCreditScore,
  CheckCreditReport,
  SubmitVisible,
  CloseVisible
} = useCreditReport()
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin: 0 auto;
  display: block;
  text-align: center;
}

@import url(@/style/CreditComm.scss);
</style>
